<template>
	<view>
		<view>
			<image v-if="show==false" :src="get_img+'sys/blind/mhbj_three.png'" class="image"></image>
			<image v-else-if="show==true" :src="get_img+'sys/blind/mhbj_four.png'" class="image"></image>
		</view>
		<view style="position: absolute;">
			<view class="hb" v-if="show==false">
				<u--image height="450rpx" width="450rpx" :src="get_img+'sys/blind/hb.png'"></u--image>
			</view>
			<view class="b1" v-if="show==false">
				<button class="button_one"type="button" @click="button">
				</button>
			</view>
			<view class="hb_two" v-if="show==true">
				<u--image height="750rpx" width="750rpx" :src="get_img+'sys/blind/hb_two.png'"></u--image>
			</view>
			<view class="b2" v-if="show==true">
				<button class="button_two" type="button" @click="button_two">
				</button>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				get_img: this.$get_img,
				show:false
			}
		},
		methods: {
			button(){
			this.show=true
			},
			button_two(){
				uni.navigateTo({
					url:'/pages/blind_box/blind_red'
				})
			}
		}
	}
</script>

<style>
.image {
		width: 100vw;
		height: 100vh;
		z-index: -1;
		position: fixed;
	}
	.hb{
		margin: 450rpx 0 0 150rpx;
	}
	.hb_two{
		margin-top:100rpx;
	}
	.button_one {
		background-image: url("@/static/icon/button_three.png");
		background-size: 350rpx 90rpx;
		height: 90rpx;
		background-color: rgba(255, 255, 255, .0);
	}
	
	.b1 {
		height: auto;
		width: 350rpx;
		margin: 15rpx 0 0 200rpx;
	}
	.button_two {
		background-image: url("@/static/icon/button_four.png");
		background-size: 200rpx 50rpx;
		height: 50rpx;
		background-color: rgba(255, 255, 255, .0);
	}
	
	.b2 {
		height: auto;
		width: 200rpx;
		margin: -200rpx 0 0 260rpx;
	}
</style>
